<template>
  <div class="actions-container">
    <div class="checkbox-container">
      <a-checkbox-group :value="checked" @change="onChange" :disabled="!showCheckbox">
        <div
          class="items-container"
          v-for="action in actions"
          :key="action.alias"
        >
          <a-checkbox
            :value="action.alias"
          >
            {{ action.name }}
          </a-checkbox>
        </div>
      </a-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    actions: {
      type: Array,
      default: () => [],
    },

    showCheckbox: {
      type: Boolean,
      default: () => true,
    },

    checked: Array,
  },

  methods: {
    onChange (value) {
      this.$emit('change', value)
    },
  },
}
</script>

<style lang="scss" scoped>
.checkbox-container {
  .items-container {
    margin: $margin-xs 0;
  }
}
</style>
